<template>

    <div class="header">

        <div class="left logo_content">

            <img src="@/assets/img/logo.png" alt="logo png" class="logo_img" />

            <router-link to="/room/index">
                <img src="@/assets/img/icon/edit1.png" class="icon" alt="icon" />
                <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                <span>手术管理</span>
            </router-link>
             <router-link to="/room/hocus">
                <img src="@/assets/img/icon/room/hocus.png" class="icon" alt="icon" />
                <img src="@/assets/img/icon/room/hocus.png" class="icon_hover" alt="icon" />
                <span>麻醉管理</span>
            </router-link>
            <router-link to="/room/device">
                <img src="@/assets/img/icon/room/device.png" class="icon" alt="icon" />
                <img src="@/assets/img/icon/room/device.png" class="icon_hover" alt="icon" />
                <span>设备管理</span>
            </router-link>

           
        </div>

        <div class="right header_detail">

            <div class="">

                <p class="text_right">
                    白内障病科
                </p>

                <ul class="">

                    <li>

                    </li>

                    <li>
                        玛丽
                    </li>

                    <li>
                        登录时间:
                        <span class="time">
                            8:00
                        </span>
                        <router-link to="/login">退出</router-link>
                    </li>

                </ul>

            </div>

        </div>

    </div>

</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component
    export default class Header extends Vue {

    }
</script>


<style lang="scss" scoped>
    .header {

        overflow: hidden;

        padding: 0.2rem 0.25rem;

        .logo_content {
            width: auto;
            position: relative;
            height: 45px;

            .logo_img {
                width: 100%;
                // position: absolute;
                // float:left;
                left: 0;
                top: 0;
                bottom: 0;
                max-width: 230px;
                margin: auto;
                margin-right: 35px;
            }

            a {
                font-weight: bold;
                color: $color;
                height: $navH;
                display: inline-block;
                line-height: $navH;
                padding: 0 0.15rem;
                border-right: 1px solid $color;
                font-size: 0.14rem;
                font-weight: 500;
                color:$themecolor;
                margin-right:30px;
                &:hover,
                &.router-link-exact-active {
                    color: $themecolor;
                    background: $color;
                    border:1px solid $themecolor;
                    .icon {
                        display: none;

                    }

                    .icon_hover {
                        display: inline-block;
                    }
                }

                .icon {
                    margin-right: 5px;
                    width: 28px;
                    margin-top: -5px;
                }

                .icon_hover {
                     width: 28px;
                    margin-right: 5px;
                    margin-top: -5px;
                    display: none;
                }


                a:first-child {

                    .btn {
                        margin-right: 30px;
                        padding: 10px 35px;
                        border-color: $color;

                        &.active {
                            background: $color;
                            color: $themecolor;
                            border-color: $themecolor;
                        }
                    }

                }

            }

            .header_detail {

                ul {
                    li {
                        color: $grey_p;
                        margin-left: 0.1rem;
                    }
                }
            }

        }
    }
</style>